<template>
	<div class="list pb50 mb10">
		<ul>
			<li
				class="ml10 mr10 mt10 bgwhite shadow br4"
				:key="idx"
				v-for="(item,idx) in this.quotaPendingOrder"
			>
				<div class="wrap">
					<p class="lh35 mt5 clearfix fs12 pl10 pr10">
						<span class="fl tl name fs14">{{item.varietyName}}</span>
						<span class="fl">{{item.orderPendingType==1?'限价':'突破'}}{{item.direction==1?'买涨':'买跌'}}</span>
						<span class="fl hand tr">{{item.handsNum}}手</span>
						<span
							class="fr fontc3"
							:class="{red:item.earnMoney>=0,green:item.earnMoney<0}"
						>{{item.buyTimeStr}}</span>
					</p>

					<p class="lh35 clearfix pl10 pr10">
						<span class="fl">
							<i class="fs14 green">{{item.stopLossMoney|formatPoint(item.marketPoint)}}</i>
							<i>止损价</i>
						</span>
						<span class="fr">
							<i class="fs14 yellow">{{item.orderPendingMoney|formatPoint(item.marketPoint)}}</i>
							<i>挂单价</i>
						</span>
					</p>
					<p class="lh35 clearfix pl10 pr10">
						<span class="fl">
							<i class="fs14 red">{{item.stopWinMoney|formatPoint(item.marketPoint)}}</i>
							<i>止盈价</i>
						</span>
						<span class="fr">
							<i class="fs14 yellow">{{item.lastPrice|formatPoint(item.marketPoint)}}</i>
							<i>当前价</i>
						</span>
					</p>
					<!-- orderPendingStatus -->
					<p
						class="lh35 mt5 action"
						v-show="item.orderPendingStatus!=5"
						@click="canclePendingOrder(item)"
					>
						<em class="fs14">撤 单</em>
					</p>
					<p class="lh35 mt5 action" v-show="item.orderPendingStatus==5">
						<em>撤单处理中</em>
					</p>
				</div>
			</li>
			<li
				class="ml10 mr10 mt20 fontc3 tc"
				style="display:list-item;"
				v-show="this.quotaPendingOrder.length<=0"
			>
				<router-link to="/quota">
					<em class="lh50 fontc3">暂无挂单</em>
					<em class="lh50 fontc2">,去下单</em>
				</router-link>
			</li>
		</ul>
	</div>
</template>
<script>
import { orderPendingOrderCanclePendingOrder } from '@api/order.js'
export default {
	name: 'hang',
	props: {
		quotaPendingOrder: {
			type: Array,
			required: true,
			default: []
		},
		gold: {
			required: true
		}
	},

	methods: {
		//挂单的撤单
		canclePendingOrder(item) {
			orderPendingOrderCanclePendingOrder(
				{
					payType: this.gold ? 0 : 1,
					batchNo: item.batchNo
				},
				'撤单中···'
			).then(res => {
				MessageBox('撤消挂单', res.msg)
			})
		}
	}
}
</script>
<style scoped lang='scss'>
.cube {
	line-height: rem(16px);
	height: rem(16px);
	width: rem(16px);
	margin-top: rem(6px);
	border-radius: rem(2px);
}

.list li strong {
	width: rem(4px);
	float: left;
}

.list li .wrap {
	flex: 1;
}

.list li p:first-child {
	border-bottom: 1px solid #f4f4f4;
}

.list li .wind img {
	vertical-align: rem(-3px);
}

.action {
	display: flex;
	justify-content: space-around;
	text-align: center;
	border-top: 1px solid #f4f4f4;
}

.action img {
	vertical-align: rem(-2px);
}

.action span {
	box-sizing: border-box;
}

.action strong {
	margin: 0 auto;
}

.action span:last-child {
	border-right: 0 none;
}
.name {
	width: rem(45px);
}

.hand {
	width: rem(40px);
}
</style>